<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width:100px;
        height:100px;
        background-color:pink;
        margin:100px auto;
    }
</style>
<body>
    <div>1111</div>
    <script>
        //事件对象
        //1、event 就是一个事件的对象，写在侦听函数的小括号里 当作形参来看
        //2、事件对象只有有了事件才会有  它是系统自动给我们创建的  不需要我们传递参数
        //3、事件对象  是 我们事件的一系列相关数据的集合  跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊 如果是键盘事件就包含键盘事件的信息，比如用户按下了哪一个键
        //4、事件对象可以自己命名，比如event、evt、e等
        //5、事件对象也有兼容性问题 ie678事件对象是window.event   解决兼容性问题可以用 e = e || window.event

        var div = document.querySelector('div');
        div.onclick = function(e){
            e = e || window.event
            console.log(e);
        }
        div.addEventListener('click',function(e){
            console.log(e);
        })

    </script>
</body>
</html>